<script setup>
import { login } from '@/api/login'
import BaseInput from '@/components/base/BaseInput.vue'
import PhoneCodeInput from '@/components/auth/PhoneCodeInput.vue'
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'
import { useStore } from 'vuex'
import uniForms from '@dcloudio/uni-ui/lib/uni-forms/uni-forms.vue'
import uniFormsItem from '@dcloudio/uni-ui/lib/uni-forms-item/uni-forms-item.vue'
import BaseButton from '@/components/base/BaseButton.vue'
import useLocaleNavigationBarTitle from '@/composables/useLocaleNavigationBarTitle'
import useLocale from '@/composables/useLocale'

const store = useStore()

const { t } = useLocale()
useLocaleNavigationBarTitle('login')

const formRef = ref(null)
const formData = ref({
    phone: '',
    code: '',
})

onLoad((option) => {
    formData.value = {
        phone: option.phone,
        ...formData.value,
    }
})

async function handleLogin() {
    try {
        const data = await formRef.value.validate()
        uni.showLoading({
            title: t('logining'),
        })
        const resp = await login({
            phoneOrEmail: data.phone,
            captcha: data.code,
            sendType: 0,
        })
        if (resp.status === 200) {
            uni.showToast({
                title: t('loginSuccess'),
                icon: 'none',
            })
            store.commit('user/setToken', resp.data.token)
            store.dispatch('user/setUser')
            uni.hideLoading()
            uni.reLaunch({
                url: '/pages/index/index',
            })
        }
    } catch (e) {
        console.log(e)
    }
}

const fields = {
    phone: {
        placeholder: t('pleaseEnterPhoneNumber'),
        component: BaseInput,
        type: 'tel',
        inputmode: 'tel',
        rules: [
            {
                required: true,
                errorMessage: t('pleaseEnterPhoneNumber'),
            },
            {
                pattern: /^1[3-9]\d{9}$/,
                errorMessage: t('pleaseEnterValidPhoneNumber'),
            },
        ],
    },
    code: {
        placeholder: t('pleaseEnterCode'),
        component: PhoneCodeInput,
        rules: [
            {
                required: true,
                errorMessage: t('pleaseEnterCode'),
            },
        ],
    },
}
</script>

<template>
    <view class="flex justify-center px-8">
        <view class="flex w-full max-w-96 flex-col gap-3 pt-20">
            <uni-forms ref="formRef" :model-value="formData">
                <uni-forms-item
                    v-for="({ rules, ...attrs }, name) in fields"
                    :key="name"
                    :rules="rules"
                    :name="name"
                >
                    <!-- 小程序不支持 <component is="" /> 的写法-->
                    <BaseInput
                        v-if="name !== 'code'"
                        v-bind="attrs"
                        v-model="formData[name]"
                    />
                    <PhoneCodeInput
                        v-else
                        v-bind="attrs"
                        v-model="formData[name]"
                        :phone="formData.phone"
                    />
                </uni-forms-item>
            </uni-forms>
            <BaseButton @click="handleLogin">{{ t('login') }}</BaseButton>
        </view>
    </view>
</template>
